<template>
  <van-popup v-model:show="state.show" class="popup-box" style="height: 100%" position="right">
    <div class="page">
      <global-header title="会员资料" @back="state.show = false"></global-header>
      <main class="page-main">
        <loading v-if="state.loading" />
        <section v-else>
          <ul class="card-ul">
            <li>
              <div>头像</div>
              <div>
                <van-image
                  class="!w-[40px] !h-[40px] !rounded-[40px] overflow-hidden"
                  :src="netAvatar(memberInfo?.Avatar)"
                />
              </div>
            </li>
            <li>
              <div>ID</div>
              <div>{{ memberInfo?.UserId || "--" }}</div>
            </li>
            <li>
              <div>会员账号</div>
              <div>{{ memberInfo?.Name || "--" }}</div>
            </li>
            <li>
              <div>会员昵称</div>
              <div>
                {{ memberInfo?.Nickname || "--" }}
              </div>
            </li>
          </ul>
          <ul class="card-ul">
            <li>
              <div>会员微信</div>
              <div>
                {{ wechat.BankNumber || "--" }}
              </div>
            </li>
            <li>
              <div>会员QQ</div>
              <div>{{ wechat.Qq || "--" }}</div>
            </li>
            <li>
              <div>微信支付</div>
              <div>
                <van-image
                  class="!w-[80px] !h-[80px] !rounded-[6px] overflow-hidden"
                  :src="wechat.QrCode ? netPath(wechat.QrCode) : QrcodeImg"
                />
              </div>
            </li>
          </ul>
          <ul class="card-ul">
            <li>
              <div>支付宝账号</div>
              <div>{{ alipay.BankNumber || "--" }}</div>
            </li>
            <li>
              <div>支付宝姓名</div>
              <div>
                {{ alipay?.BankUsername || "--" }}
              </div>
            </li>
            <li>
              <div>支付宝支付</div>
              <div>
                <van-image
                  class="!w-[80px] !h-[80px] !rounded-[6px] overflow-hidden"
                  :src="alipay.QrCode ? netPath(alipay.QrCode) : QrcodeImg"
                />
              </div>
            </li>
          </ul>
          <ul class="card-ul">
            <li>
              <div>银行卡姓名</div>
              <div>{{ alipay.BankUsername || "--" }}</div>
            </li>
            <li>
              <div>银行卡类型</div>
              <div>
                {{ alipay?.BankName || "--" }}
              </div>
            </li>
            <li>
              <div>银行卡开户地</div>
              <div>
                {{ alipay?.BankAddress || "--" }}
              </div>
            </li>
            <li>
              <div>银行卡号</div>
              <div>
                {{ alipay?.BankNumber || "--" }}
              </div>
            </li>
          </ul>
          <ul class="card-ul" v-for="(item, index) in usdt" :key="index">
            <li>
              <div>虚拟币名称</div>
              <div>{{ item.BankName || "--" }}</div>
            </li>
            <li>
              <div>虚拟币地址</div>
              <div>
                {{ item?.BankNumber || "--" }}
              </div>
            </li>
            <li>
              <div>虚拟币支付</div>
              <div>
                <van-image
                  class="!w-[80px] !h-[80px] !rounded-[6px] overflow-hidden"
                  :src="item.QrCode ? netPath(item.QrCode) : QrcodeImg"
                />
              </div>
            </li>
          </ul>
        </section>
      </main>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
import QrcodeImg from "@/assets/images/qrcode.png";
import { reqUserInfo } from "@/api/user";
import { netAvatar, netPath } from "@/utils/common";

type BankInfoMo = MemberInfoMo["BankInfo"][0];

const props = withDefaults(
  defineProps<{
    uid: number | null;
  }>(),
  {}
);

const emit = defineEmits(["update"]);
const memberInfo = ref<MemberInfoMo | null>(null);
const state = reactive({
  show: false,
  loading: false,
  Note: ""
});
const defaultPaymentData: BankInfoMo = {
  BankAddress: "",
  BankName: "",
  BankNumber: "",
  BankType: <1 | 2 | 3 | 4>1,
  BankUsername: "",
  Id: 0,
  Qq: "",
  QrCode: ""
};
const wechat = ref<BankInfoMo>({
  ...defaultPaymentData
});
const alipay = ref<BankInfoMo>({
  ...defaultPaymentData,
  BankType: 2
});
const bank = ref<BankInfoMo>({
  ...defaultPaymentData,
  BankType: 3
});
const usdt = ref<BankInfoMo[]>([]);

const getData = async () => {
  if (!props.uid) return;
  try {
    state.loading = true;
    const res = await reqUserInfo(props.uid);
    state.loading = false;
    memberInfo.value = res.data;
    state.Note = memberInfo.value?.Note || "";
    const wechatData = res.data.BankInfo.find(item => item.BankType === 1)!;
    if (wechatData) {
      wechat.value = wechatData;
    }
    const alipayData = res.data.BankInfo.find(item => item.BankType === 2)!;
    if (alipayData) {
      alipay.value = alipayData;
    }
    const bankData = res.data.BankInfo.find(item => item.BankType === 3)!;
    if (bankData) {
      bank.value = bankData;
    }
    usdt.value = res.data.BankInfo.filter(item => item.BankType === 4);
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};
const closed = () => {
  state.show = false;
};

const open = () => {
  state.show = true;
  getData();
  state.Note = "";
};
defineExpose({
  closed,
  open
});
</script>
<style scoped>
.card-ul {
  @apply bg-[#fff] text-[14px] text-[#888] mb-[10px];
}
.card-ul li {
  @apply flex items-center py-[10px] px-[15px];
}
.card-ul li > div:first-child {
  @apply w-[100px];
}
.card-ul li > div:last-child {
  @apply flex-1 w-0 break-all;
}
</style>
